<%--
  Created by IntelliJ IDEA.
  User: lirance
  Date: 16/3/17
  Time: 下午1:16
  To change this template use File | Settings | File Templates.
  显示用户以及服务列表
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <%-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"/>--%>
    <title>预测结果评估</title>
    <link href="./css/amber-style.css" rel="stylesheet"/>
    <link href="./css/bootstrap.css">
    <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
    <%--
        <link href="http://www.francescomalagrino.com/BootstrapPageGenerator/3/css/bootstrap-combined.min.css"
              rel="stylesheet" media="screen">--%>
    <style type="text/css"></style>

    <script src="./js/jquery-2.2.3.js"></script>
    <script src="./js/echarts-all.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/amber-script.js"></script>
    <script src="./js/amber-chart.js"></script>


    <script src="./js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
<header>
    <div class="container">
        <p class="header-con-p">基于协同过滤的服务推荐系统</p>
    </div>
</header>
<div class="content">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-12">
                <div class="row-fluid">
                    <div class="col-md-3">
                        <div class="panel-group" id="accordion-821083" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-289331" aria-expanded="true"
                                           aria-controls="collapseOne">
                                            Qos数据信息管理
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-289331" class="panel-collapse collapse" role="tabpanel"
                                     aria-labelledby="headingOne">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户信息管理
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                web服务信息
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                用户-web服务调用信息
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingTwo">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691493" aria-expanded="true"
                                           aria-controls="collapseTwo">
                                            Web服务聚类
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691493" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingTwo">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                Web服务层次聚类
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                聚类结果分析
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingThree">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691494" aria-expanded="true"
                                           aria-controls="collapseThree">
                                            Qos预测
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691494" class="panel-collapse collapse " role="tabpanel"
                                     aria-labelledby="headingThree">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                用户相似度分析与Qos预测
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default ">
                                <div class="panel-heading" role="tab" id="headingFour">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           href="#accordion-element-691495" aria-expanded="true"
                                           aria-controls="collapseFour">
                                            预测结果评估
                                        </a>
                                    </h4>
                                </div>
                                <div id="accordion-element-691495" class="panel-collapse collapse in" role="tabpanel"
                                     aria-labelledby="headingFour">
                                    <div class="panel-body">
                                        <div class="panel-inner">
                                            <a href="#panel-425252" data-toggle="tab" style="color:black">
                                                λ与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316496" data-toggle="tab" style="color:black">
                                                top-K与预测结果的关系
                                            </a>

                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316497" data-toggle="tab" style="color:black">
                                                聚类数目与预测结果的关系
                                            </a>
                                        </div>
                                        <div class="panel-inner">
                                            <a href="#panel-316498" data-toggle="tab" style="color:black">
                                                数据多少与预测结果的关系
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script type="text/javascript">
                                $(function () {
                                    $('#accordion-element-289331').on('show.bs.collapse', function () {
                                        window.location.href = 'getListsAction';
                                    })
                                    $('#accordion-element-691493').on('show.bs.collapse', function () {
                                        window.location.href = 'getClustersAction';
                                    })
                                    $('#accordion-element-691494').on('show.bs.collapse', function () {
                                        window.location.href = 'qosAction.action';
                                    })
                                    $('#accordion-element-691495').on('show.bs.collapse', function () {
                                        window.location.href = 'result.jsp';
                                    })
                                });
                            </script>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="tabbable" id="tabs-191694">
                            <ul class="nav nav-tabs">
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="panel-425252">
                                    <div class="row-fluid">
                                        <div class="col-md-12" style="overflow-x: hidden; height:600px; width:820px">
                                            <div class="panel panel-success">
                                                <!-- 面板1 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
                                                    <span class="glyphicon glyphicon-import"></span>&nbsp; 输入区域
                                                </div>
                                                <div class="panel-body">
                                                    <form class="form-inline" method="post">
                                                        <div class="form-group amber-font-20">
                                                            预测方式:
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-info"
                                                                        id="modelSelect"
                                                                        name='model0'>非聚类方式
                                                                </button>
                                                                <button type="button"
                                                                        class="btn btn-info dropdown-toggle"
                                                                        data-toggle="dropdown">
                                                                    <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu"
                                                                    id="modelSelectUl">
                                                                    <li><a name="model0">非聚类方式</a></li>
                                                                    <li><a name="model1">聚类方式</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <br/><br/>

                                                        <div class="form-group amber-font-20">
                                                            &nbsp;&nbsp;参&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;:
                                                            <div class="input-group">
                                                                <div class="input-group-addon">Top-k</div>
                                                                <input type="number" class="form-control" id="k"
                                                                       name="k"
                                                                       placeholder="">
                                                            </div>
                                                            <div class="input-group">
                                                                <div class="input-group-addon">Gn</div>
                                                                <input type="number" class="form-control" id="Gn"
                                                                       name="Gn"
                                                                       placeholder="">
                                                            </div>
                                                        </div>
                                                        <%--   </form>
                                                           <form class="form-inline amber-margin-top10">--%>
                                                        <div id="form-area1">
                                                        </div>
                                                        <div id="form-area2" style="display:none;">
                                                            <br/>

                                                            <div class="form-group amber-font-20">
                                                                聚类个数:
                                                                <div class="input-group">
                                                                    <input type="number" class="form-control"
                                                                           id="clustNum"
                                                                           name="clustNum"
                                                                           placeholder="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <p class="amber-margin-top10">
                                                            <input type="button" class="btn btn-primary"
                                                                   id="execute-btn"
                                                                   value="执行"/>
                                                        </p>
                                                    </form>
                                                </div>
                                            </div>
                                            <!-- 面板1 -->


                                            <div class="panel panel-danger">
                                                <!-- 面板2 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
							<span class="glyphicon glyphicon-export"
                                  style="margin-bottom:10px;"></span>&nbsp; MAE&RMSE
                                                </div>
                                                <div id="main" style="width: 800px;height:600px;"></div>
                                                <script type="text/javascript">
                                                    var myChart = echarts.init(document.getElementById('main'));
                                                    var option = {
                                                        title: {
                                                            text: 'MAE&RMSE与参数λ的关系',
                                                            /*subtext: '纯属虚构'*/
                                                        },
                                                        tooltip: {
                                                            trigger: 'axis'
                                                        },
                                                        legend: {
                                                            data: ['MAE', 'RMSE']
                                                        },
                                                        toolbox: {
                                                            show: true,
                                                            feature: {
                                                                dataView: {show: true, readOnly: false},
                                                                magicType: {show: true, type: ['line', 'bar']},
                                                                restore: {show: true},
                                                                saveAsImage: {show: true}
                                                            }
                                                        },
                                                        calculable: true,
                                                        xAxis: [
                                                            {
                                                                type: 'category',
                                                                data: ['0.0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1.0']
                                                            }
                                                        ],
                                                        yAxis: [
                                                            {
                                                                type: 'value',
                                                                scale: true
                                                            }
                                                        ],
                                                        series: [
                                                            {
                                                                name: 'MAE',
                                                                type: 'line',
                                                                data: [956.77, 850.67, 765.93, 625.40, 700.00, 704.7, 710.33, 748.23, 802.05, 822.43, 1006.93],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            },
                                                            {
                                                                name: 'RMSE',
                                                                type: 'line',
                                                                data: [1052.77, 950.87, 880.67, 705.04, 751.70, 808.93, 818.94, 872.65, 874.63, 1001.49, 1184.63],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            }
                                                        ]
                                                    };
                                                    myChart.setOption(option);
                                                    /*下拉菜单样式*/
                                                    $("#modelSelectUl a").click(function () {
                                                        $("#modelSelect").text($(this).text());
                                                        var name = $(this).attr("name");
                                                        $("#modelSelect").attr("name", name);
                                                        modelName = name;
                                                        if (modelName == "model0") {
                                                            $("#form-area2").hide();
                                                            $("#form-area1").fadeIn(500);
                                                        } else if (modelName == "model1") {
                                                            $("#form-area1").hide();
                                                            $("#form-area2").fadeIn(500);
                                                        }
                                                    });

                                                    $("#execute-btn").click(
                                                            function () {
                                                                k = $("#k").val();
                                                                clustNum = $("#clustNum").val();
                                                                Gn = $("#Gn").val();
                                                                ask();
                                                            });

                                                    function ask() {
                                                        $.getJSON("getResultsBylmd.action", {
                                                            k: k,
                                                            clustNum: clustNum,
                                                            Gn: Gn
                                                        }, function (data) {
                                                            myChart.setOption({
                                                                series: [{
                                                                    name: 'MAE',
                                                                    data: data.mae
                                                                }, {
                                                                    name: 'RMSE',
                                                                    data: data.rmse
                                                                }
                                                                ]
                                                            });

                                                        });
                                                    }

                                                    /*  }*/
                                                </script>
                                                <script type="text/javascript">

                                                </script>

                                            </div>

                                            <div id="printTable"></div>
                                            <div class=row>
                                                <div class="col-md-6" id="printPage"></div>
                                                <div class="col-md-6" id="printPage_f"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="panel-316496">
                                    <div class="row-fluid">
                                        <div class="col-md-12">
                                            <div class="col-md-12"
                                                 style="overflow-x: hidden; height:600px; width:820px">
                                                <div class="panel panel-success">
                                                    <!-- 面板1 -->
                                                    <!-- Default panel contents -->
                                                    <div class="panel-heading amber-font">
                                                        <span class="glyphicon glyphicon-import"></span>&nbsp; 输入区域
                                                    </div>
                                                    <div class="panel-body">
                                                        <form class="form-inline" method="post">
                                                            <div class="form-group amber-font-20">
                                                                预测方式:
                                                                <div class="btn-group">
                                                                    <button type="button" class="btn btn-info"
                                                                            id="modelSelect1"
                                                                            name='model0'>非聚类方式
                                                                    </button>
                                                                    <button type="button"
                                                                            class="btn btn-info dropdown-toggle"
                                                                            data-toggle="dropdown">
                                                                        <span class="caret"></span>
                                                                    </button>
                                                                    <ul class="dropdown-menu" role="menu"
                                                                        id="modelSelectUl1">
                                                                        <li><a name="model0">非聚类方式</a></li>
                                                                        <li><a name="model1">聚类方式</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <br/><br/>

                                                            <div class="form-group amber-font-20">
                                                                &nbsp;&nbsp;参&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;:
                                                                <div class="input-group">
                                                                    <div class="input-group-addon">λ:</div>
                                                                    <input type="number" class="form-control" id="lmd"
                                                                           name="lmd"
                                                                           placeholder="">
                                                                </div>
                                                                <div class="input-group">
                                                                    <div class="input-group-addon">Gn:</div>
                                                                    <input type="number" class="form-control" id="Gn1"
                                                                           name="Gn1"
                                                                           placeholder="">
                                                                </div>
                                                            </div>
                                                            <%--   </form>
                                                               <form class="form-inline amber-margin-top10">--%>
                                                            <div id="form-area12">
                                                            </div>
                                                            <div id="form-area22" style="display:none;">
                                                                <br/>

                                                                <div class="form-group amber-font-20">
                                                                    聚类个数:
                                                                    <div class="input-group">
                                                                        <input type="number" class="form-control"
                                                                               id="clustNum1"
                                                                               name="clustNum1"
                                                                               placeholder="">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <p class="amber-margin-top10">
                                                                <input type="button" class="btn btn-primary"
                                                                       id="execute-btn1"
                                                                       value="执行"/>
                                                            </p>
                                                        </form>
                                                    </div>
                                                </div>
                                                <!-- 面板1 -->


                                                <div class="panel panel-danger">
                                                    <!-- 面板2 -->
                                                    <!-- Default panel contents -->
                                                    <div class="panel-heading amber-font">
							                            <span class="glyphicon glyphicon-export"
                                                              style="margin-bottom:10px;"></span>&nbsp; MAE&RMSE
                                                    </div>
                                                    <div id="main1" style="width: 800px;height:600px;"></div>
                                                    <script type="text/javascript">

                                                        var myChart1 = echarts.init(document.getElementById('main1'));
                                                        var option1 = {
                                                            title: {
                                                                text: 'MAE&RMSE与参数k的关系',
                                                                /*subtext: '纯属虚构'*/
                                                            },
                                                            tooltip: {
                                                                trigger: 'axis'
                                                            },
                                                            legend: {
                                                                data: ['MAE', 'RMSE']
                                                            },
                                                            toolbox: {
                                                                show: true,
                                                                feature: {
                                                                    dataView: {show: true, readOnly: false},
                                                                    magicType: {show: true, type: ['line', 'bar']},
                                                                    restore: {show: true},
                                                                    saveAsImage: {show: true}
                                                                }
                                                            },
                                                            calculable: true,
                                                            xAxis: [
                                                                {
                                                                    type: 'category',
                                                                    data: ['5', '10', '15', '20', '25', '30']
                                                                }
                                                            ],
                                                            yAxis: [
                                                                {
                                                                    type: 'value',
                                                                    scale: true
                                                                }
                                                            ],
                                                            series: [
                                                                {
                                                                    name: 'MAE',
                                                                    type: 'line',
                                                                    data: [],
                                                                    markPoint: {
                                                                        data: [
                                                                            {type: 'max', name: '最大值'},
                                                                            {type: 'min', name: '最小值'}
                                                                        ]
                                                                    },
                                                                    markLine: {
                                                                        data: [
                                                                            {type: 'average', name: '平均值'}
                                                                        ]
                                                                    }
                                                                },
                                                                {
                                                                    name: 'RMSE',
                                                                    type: 'line',
                                                                    data: [],
                                                                    markPoint: {
                                                                        data: [
                                                                            {type: 'max', name: '最大值'},
                                                                            {type: 'min', name: '最小值'}
                                                                        ]
                                                                    },
                                                                    markLine: {
                                                                        data: [
                                                                            {type: 'average', name: '平均值'}
                                                                        ]
                                                                    }
                                                                }
                                                            ]
                                                        };
                                                        myChart1.setOption(option1);

                                                        var modelName = "model0";
                                                        var lmd = 0;
                                                        var clustNum = 0;
                                                        var Gn = 10;

                                                        /*下拉菜单样式*/
                                                        $("#modelSelectUl1 a").click(function () {
                                                            $("#modelSelect1").text($(this).text());
                                                            var name = $(this).attr("name");
                                                            $("#modelSelect1").attr("name", name);
                                                            modelName = name;
                                                            if (modelName == "model0") {
                                                                $("#form-area22").hide();
                                                                $("#form-area12").fadeIn(500);
                                                            } else if (modelName == "model1") {
                                                                $("#form-area12").hide();
                                                                $("#form-area22").fadeIn(500);
                                                            }
                                                        });

                                                        $("#execute-btn1").click(
                                                                function () {
                                                                    Gn = $("#Gn1").val();
                                                                    lmd = $("#lmd").val();
                                                                    clustNum = $("#clustNum1").val();
                                                                    ask1();
                                                                });

                                                        function ask1() {
                                                            $.getJSON("getResultsByk.action", {
                                                                lmd: lmd,
                                                                clustNum: clustNum,
                                                                Gn: Gn
                                                            }, function (data) {
                                                                myChart1.setOption({
                                                                    series: [{
                                                                        name: 'MAE',
                                                                        data: data.mae
                                                                    }, {
                                                                        name: 'RMSE',
                                                                        data: data.rmse
                                                                    }
                                                                    ]
                                                                });
                                                            });
                                                        }

                                                        /*  }*/
                                                    </script>
                                                    <script type="text/javascript">

                                                    </script>

                                                </div>

                                                <div id="printTable1"></div>
                                                <div class=row>
                                                    <div class="col-md-6" id="printPage1"></div>
                                                    <div class="col-md-6" id="printPage_f1"></div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="panel-316497">
                                    <div class="row-fluid">
                                        <div class="col-md-12" style="overflow-x: hidden; height:600px; width:820px">
                                            <div class="panel panel-success">
                                                <!-- 面板1 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
                                                    <span class="glyphicon glyphicon-import"></span>&nbsp; 输入区域
                                                </div>
                                                <div class="panel-body">
                                                    <form class="form-inline" method="post">
                                                        <div class="form-group amber-font-20">
                                                            &nbsp;&nbsp;参&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;:
                                                            <div class="input-group">
                                                                <div class="input-group-addon">Top-k</div>
                                                                <input type="number" class="form-control" id="k1"
                                                                       name="k1"
                                                                       placeholder="">
                                                            </div>
                                                            <div class="input-group">
                                                                <div class="input-group-addon">λ</div>
                                                                <input type="number" class="form-control" id="lmd1"
                                                                       name="lmd1"
                                                                       placeholder="">
                                                            </div>
                                                            <br/><br/>
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                            <div class="input-group">
                                                                <div class="input-group-addon">Gn</div>
                                                                <input type="number" class="form-control" id="Gn2"
                                                                       name="Gn2"
                                                                       placeholder="">
                                                            </div>
                                                        </div>
                                                        <%--   </form>
                                                           <form class="form-inline amber-margin-top10">--%>
                                                        <%--<div id="form-area1">
                                                        </div>
                                                        <div id="form-area2" style="display:none;">
                                                            <br/>

                                                            <div class="form-group amber-font-20">
                                                                聚类个数:
                                                                <div class="input-group">
                                                                    <input type="number" class="form-control"
                                                                           id="clustNum"
                                                                           name="clustNum"
                                                                           placeholder="">
                                                                </div>
                                                            </div>
                                                        </div>--%>
                                                        <p class="amber-margin-top10">
                                                            <input type="button" class="btn btn-primary"
                                                                   id="execute-btn2"
                                                                   value="执行"/>
                                                        </p>
                                                    </form>
                                                </div>
                                            </div>
                                            <!-- 面板1 -->


                                            <div class="panel panel-danger">
                                                <!-- 面板2 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
							<span class="glyphicon glyphicon-export"
                                  style="margin-bottom:10px;"></span>&nbsp; MAE&RMSE
                                                </div>
                                                <div id="main2" style="width: 800px;height:600px;"></div>
                                                <script type="text/javascript">
                                                    var app = {};
                                                    var myChart2 = echarts.init(document.getElementById('main2'));
                                                    var option2 = {
                                                        title: {
                                                            text: 'MAE&RMSE与聚类数目的关系',
                                                            /*subtext: '纯属虚构'*/
                                                        },
                                                        tooltip: {
                                                            trigger: 'axis'
                                                        },
                                                        legend: {
                                                            data: ['MAE', 'RMSE']
                                                        },
                                                        toolbox: {
                                                            show: true,
                                                            feature: {
                                                                dataView: {show: true, readOnly: false},
                                                                magicType: {show: true, type: ['line', 'bar']},
                                                                restore: {show: true},
                                                                saveAsImage: {show: true}
                                                            }
                                                        },
                                                        calculable: true,
                                                        xAxis: [
                                                            {
                                                                type: 'category',
                                                                data: ['5', '10', '15', '20', '25']
                                                            }
                                                        ],
                                                        yAxis: [
                                                            {
                                                                type: 'value',
                                                                scale: true
                                                            }
                                                        ],
                                                        /* dataZoom: [
                                                         {
                                                         type: 'slider',
                                                         show: true,
                                                         yAxisesIndex: [0],
                                                         left: '93%',
                                                         start: 29,
                                                         end: 36
                                                         },
                                                         {
                                                         type: 'inside',
                                                         yAxisIndex: [0],
                                                         start: 29,
                                                         end: 36
                                                         }
                                                         ],*/
                                                        series: [
                                                            {
                                                                name: 'MAE',
                                                                type: 'line',
                                                                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            },
                                                            {
                                                                name: 'RMSE',
                                                                type: 'line',
                                                                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            }
                                                        ]
                                                    };
                                                    //  myChart.setOption(option);
                                                    if (option && typeof option === "object") {
                                                        var startTime = +new Date();
                                                        myChart2.setOption(option2, true);
                                                        var endTime = +new Date();
                                                        var updateTime = endTime - startTime;
                                                        console.log("Time used:", updateTime);
                                                    }


                                                    /*$("#execute-btn").click(function () {
                                                     k = $("#k").val();
                                                     clustNum = $("#clustNum").val();
                                                     ask();
                                                     });*/
                                                    var modelName = "model0";
                                                    var k = 0;
                                                    var lmd = 0;
                                                    var Gn = 10;

                                                    /*下拉菜单样式*/
                                                    /* $("#modelSelectUl a").click(function () {
                                                     $("#modelSelect").text($(this).text());
                                                     var name = $(this).attr("name");
                                                     $("#modelSelect").attr("name", name);
                                                     modelName = name;
                                                     if (modelName == "model0") {
                                                     $("#form-area2").hide();
                                                     $("#form-area1").fadeIn(500);
                                                     } else if (modelName == "model1") {
                                                     $("#form-area1").hide();
                                                     $("#form-area2").fadeIn(500);
                                                     }
                                                     });*/

                                                    $("#execute-btn2").click(
                                                            function () {
                                                                k = $("#k1").val();
                                                                lmd = $("#lmd1").val();
                                                                Gn = $("#Gn2").val();
                                                                ask2();
                                                            });

                                                    function ask2() {
                                                        $.getJSON("getResultsByclustNum.action", {
                                                            k: k,
                                                            lmd: lmd,
                                                            Gn: Gn
                                                        }, function (data) {
                                                            myChart2.setOption({
                                                                series: [{
                                                                    name: 'MAE',
                                                                    data: data.mae
                                                                }, {
                                                                    name: 'RMSE',
                                                                    data: data.rmse
                                                                }
                                                                ]
                                                            });
                                                        });
                                                    }

                                                    /*  }*/
                                                </script>
                                                <script type="text/javascript">

                                                </script>

                                            </div>

                                            <div id="printTable2"></div>
                                            <div class=row>
                                                <div class="col-md-6" id="printPage2"></div>
                                                <div class="col-md-6" id="printPage_f2"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="panel-316498">
                                    <div class="row-fluid">
                                        <div class="col-md-12" style="overflow-x: hidden; height:600px; width:820px">
                                            <div class="panel panel-success">
                                                <!-- 面板1 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
                                                    <span class="glyphicon glyphicon-import"></span>&nbsp; 输入区域
                                                </div>
                                                <div class="panel-body">
                                                    <form class="form-inline" method="post">
                                                        <div class="form-group amber-font-20">
                                                            预测方式:
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-info"
                                                                        id="modelSelect3"
                                                                        name='model0'>非聚类方式
                                                                </button>
                                                                <button type="button"
                                                                        class="btn btn-info dropdown-toggle"
                                                                        data-toggle="dropdown">
                                                                    <span class="caret"></span>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu"
                                                                    id="modelSelectUl3">
                                                                    <li><a name="model0">非聚类方式</a></li>
                                                                    <li><a name="model1">聚类方式</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <br/><br/>

                                                        <div class="form-group amber-font-20">
                                                            &nbsp;&nbsp;参&nbsp;&nbsp;&nbsp;数&nbsp;&nbsp;:
                                                            <div class="input-group">
                                                                <div class="input-group-addon">Top-k</div>
                                                                <input type="number" class="form-control" id="k2"
                                                                       name="k2"
                                                                       placeholder="">
                                                            </div>
                                                            <div class="input-group">
                                                                <div class="input-group-addon">λ</div>
                                                                <input type="number" class="form-control" id="lmd2"
                                                                       name="lmd2"
                                                                       placeholder="">
                                                            </div>
                                                        </div>
                                                        <%--   </form>
                                                           <form class="form-inline amber-margin-top10">--%>
                                                        <div id="form-area13">
                                                        </div>
                                                        <div id="form-area23" style="display:none;">
                                                            <br/>

                                                            <div class="form-group amber-font-20">
                                                                聚类个数:
                                                                <div class="input-group">
                                                                    <input type="number" class="form-control"
                                                                           id="clustNum2"
                                                                           name="clustNum2"
                                                                           placeholder="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <p class="amber-margin-top10">
                                                            <input type="button" class="btn btn-primary"
                                                                   id="execute-btn3"
                                                                   value="执行"/>
                                                        </p>
                                                    </form>
                                                </div>
                                            </div>
                                            <!-- 面板1 -->


                                            <div class="panel panel-danger">
                                                <!-- 面板2 -->
                                                <!-- Default panel contents -->
                                                <div class="panel-heading amber-font">
							<span class="glyphicon glyphicon-export"
                                  style="margin-bottom:10px;"></span>&nbsp; MAE&RMSE
                                                </div>
                                                <div id="main3" style="width: 800px;height:600px;"></div>
                                                <script type="text/javascript">
                                                    var myChart3 = echarts.init(document.getElementById('main3'));
                                                    var option3 = {
                                                        title: {
                                                            text: 'MAE&RMSE与数据量的关系',
                                                            /*subtext: '纯属虚构'*/
                                                        },
                                                        tooltip: {
                                                            trigger: 'axis'
                                                        },
                                                        legend: {
                                                            data: ['MAE', 'RMSE']
                                                        },
                                                        toolbox: {
                                                            show: true,
                                                            feature: {
                                                                dataView: {show: true, readOnly: false},
                                                                magicType: {show: true, type: ['line', 'bar']},
                                                                restore: {show: true},
                                                                saveAsImage: {show: true}
                                                            }
                                                        },
                                                        calculable: true,
                                                        xAxis: [
                                                            {
                                                                type: 'category',
                                                                data: ['10', '20', '30', '40', '50']
                                                            }
                                                        ],
                                                        yAxis: [
                                                            {
                                                                type: 'value',
                                                                scale: true
                                                            }
                                                        ],
                                                        /* dataZoom: [
                                                         {
                                                         type: 'slider',
                                                         show: true,
                                                         yAxisesIndex: [0],
                                                         left: '93%',
                                                         start: 29,
                                                         end: 36
                                                         },
                                                         {
                                                         type: 'inside',
                                                         yAxisIndex: [0],
                                                         start: 29,
                                                         end: 36
                                                         }
                                                         ],*/
                                                        series: [
                                                            {
                                                                name: 'MAE',
                                                                type: 'line',
                                                                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            },
                                                            {
                                                                name: 'RMSE',
                                                                type: 'line',
                                                                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                                                                markPoint: {
                                                                    data: [
                                                                        {type: 'max', name: '最大值'},
                                                                        {type: 'min', name: '最小值'}
                                                                    ]
                                                                },
                                                                markLine: {
                                                                    data: [
                                                                        {type: 'average', name: '平均值'}
                                                                    ]
                                                                }
                                                            }
                                                        ]
                                                    };
                                                    myChart3.setOption(option3);
                                                    /* if (option && typeof option === "object") {
                                                        var startTime = +new Date();
                                                     myChart3.setOption(option3, true);
                                                        var endTime = +new Date();
                                                        var updateTime = endTime - startTime;
                                                        console.log("Time used:", updateTime);
                                                     }*/


                                                    /*$("#execute-btn").click(function () {
                                                     k = $("#k").val();
                                                     clustNum = $("#clustNum").val();
                                                     ask();
                                                     });*/
                                                    var modelName = "model0";
                                                    var k = 0;
                                                    var clustNum = 0;
                                                    var lmd = 0;

                                                    /*下拉菜单样式*/
                                                    $("#modelSelectUl3 a").click(function () {
                                                        $("#modelSelect3").text($(this).text());
                                                        var name = $(this).attr("name");
                                                        $("#modelSelect3").attr("name", name);
                                                        modelName = name;
                                                        if (modelName == "model0") {
                                                            $("#form-area23").hide();
                                                            $("#form-area13").fadeIn(500);
                                                        } else if (modelName == "model1") {
                                                            $("#form-area13").hide();
                                                            $("#form-area23").fadeIn(500);
                                                        }
                                                    });

                                                    $("#execute-btn3").click(
                                                            function () {
                                                                k = $("#k2").val();
                                                                clustNum = $("#clustNum2").val();
                                                                lmd = $("#lmd2").val();
                                                                ask3();
                                                            });

                                                    function ask3() {
                                                        $.getJSON("getResultsByDataNum.action", {
                                                            k: k,
                                                            clustNum: clustNum,
                                                            lmd: lmd,
                                                        }, function (data) {
                                                            myChart3.setOption({
                                                                series: [{
                                                                    name: 'MAE',
                                                                    data: data.mae
                                                                }, {
                                                                    name: 'RMSE',
                                                                    data: data.rmse
                                                                }
                                                                ]
                                                            });
                                                        });
                                                    }

                                                    /*  }*/
                                                </script>
                                                <script type="text/javascript">

                                                </script>

                                            </div>

                                            <div id="printTable3"></div>
                                            <div class=row>
                                                <div class="col-md-6" id="printPage3"></div>
                                                <div class="col-md-6" id="printPage_f3"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>